<!--
 * @Description: 打印
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-07-14 22:36:32
 * @FilePath: /yuxiuproweb/src/views/mes/pro/stock/mods/print.vue
-->
<template>
  <el-drawer
    size="60%"
    :visible.sync="shows"
    direction="ltr"
    :with-header="false"
    class="drawer-view"
  >
    <div id="printContent">
      <div style="padding-top: 1px" v-for="(data, i) in list" :key="i">
        <div :id="`content${i}`">
          <div style="display: flex; align-items: center">
            <div style="flex: 1">
              <table width="100%" border="1" cellpadding="8" cellspacing="0">
                <tr align="left">
                  <td colspan="1" style="background: #babab8">客户名</td>
                  <td colspan="1">{{ data.clientName }}</td>
                  <td colspan="3" style="background: #babab8">交单日期</td>
                  <td colspan="3">{{ data.submitTime }}</td>
                </tr>
                <tr align="left">
                  <td colspan="1" style="background: #babab8">手机号</td>
                  <td colspan="1">{{ data.tel }}</td>
                  <td colspan="3" style="background: #babab8">销售单号</td>
                  <td colspan="3">{{ data.proOrderId }}</td>
                </tr>
                <tr align="left">
                  <td colspan="1" style="background: #babab8">品牌</td>
                  <td colspan="1">有点牛</td>
                  <td colspan="3" style="background: #babab8">下单人</td>
                  <td colspan="3">{{ data.preparedByName }}</td>
                  <!-- <td colspan="1" style="background: #babab8">快递</td>
              <td colspan="1">百世物流/到付</td> -->
                </tr>
                <tr>
                  <td colspan="1" style="background: #babab8">地址</td>
                  <td colspan="7">
                    {{ data.address }}
                  </td>
                </tr>
                <tr>
                  <td colspan="1" style="background: #babab8">备注</td>
                  <td colspan="7">{{ data.remark }}</td>
                </tr>
              </table>
            </div>
            <div>
              <div style="transform: rotate(90deg)">
                <div style="height: 80px; width: 140px">
                  <img :id="`barCode${i}`" />
                </div>
              </div>
            </div>
          </div>
          <div v-if="data.customCurtainList.length">
            <h2>定制窗帘</h2>
            <table
              width="100%"
              class="mt10 table-top"
              border="1"
              cellpadding="8"
              cellspacing="0"
              align="center"
            >
              <tr v-for="(item, index) in data.customCurtainList" :key="index">
                <td>{{ index + 1 }}</td>
                <td>{{ item.room ? item.room.name : "" }}</td>
                <td>
                  {{ item.curtainInfo }} 面料：{{ item.detail }} 房间：{{
                    item.room ? item.room.name : ""
                  }}
                  数量：{{ item.number }}
                </td>
                <td>
                  余料{{
                    item.oddments === "0"
                      ? "无"
                      : item.oddments === "1"
                      ? "寄回"
                      : item.oddments === "2"
                      ? "加工"
                      : "无"
                  }}
                </td>
                <td>{{ item.checked ? "已完成" : "未完成" }}</td>
              </tr>
            </table>
          </div>
          <div v-if="data.proOrderCustomWindowCurtains.length">
            <h2>定制窗幔</h2>
            <table
              width="100%"
              class="mt10 table-top"
              border="1"
              cellpadding="8"
              cellspacing="0"
              align="center"
            >
              <tr
                v-for="(item, index) in data.proOrderCustomWindowCurtains"
                :key="index"
              >
                <td>{{ index + 1 }}</td>
                <td>{{ item.room ? item.room.name : "" }}</td>
                <td>
                  {{ item.name }} | {{ item.detail }} 数量：{{
                    item.number
                  }}
                  宽：{{ item.wright }} 高：{{ item.height }}
                  {{ item.fixedMethodName }} 备注：{{ item.processingRemarks }}
                </td>
                <td>
                  余料{{
                    item.oddments === "0"
                      ? "无"
                      : item.oddments === "1"
                      ? "寄回"
                      : item.oddments === "2"
                      ? "加工"
                      : "无"
                  }}
                </td>
                <td>{{ item.checked ? "已完成" : "未完成" }}</td>
              </tr>
            </table>
          </div>
          <div v-if="data.proOrderCustomOthers.length">
            <h2>定制其他</h2>
            <table
              width="100%"
              class="mt10 table-top"
              border="1"
              cellpadding="8"
              cellspacing="0"
              align="center"
            >
              <tr
                v-for="(item, index) in data.proOrderCustomOthers"
                :key="index"
              >
                <td>{{ index + 1 }}</td>
                <td>{{ item.room ? item.room.name : "" }}</td>
                <td>
                  {{ item.name }} | {{ item.detail }} 数量：{{ item.number }}
                </td>
                <td>
                  余料{{
                    item.oddments === "0"
                      ? "无"
                      : item.oddments === "1"
                      ? "寄回"
                      : item.oddments === "2"
                      ? "加工"
                      : "无"
                  }}
				 备注：{{ item.processingRemarks }}
                </td>
                <td>{{ item.checked ? "已完成" : "未完成" }}</td>
              </tr>
            </table>
          </div>
          <div v-if="data.proOrderRaws.length">
            <h2>成品原料</h2>
            <table
              width="100%"
              class="mt10 table-top"
              border="1"
              cellpadding="8"
              cellspacing="0"
              align="center"
            >
              <tr v-for="(item, index) in data.proOrderRaws" :key="index">
                <td>{{ index + 1 }}</td>
                <td>{{ item.room ? item.room.name : "" }}</td>
                <td>{{ item.name }} 数量：{{ item.number }}</td>
                <td>
                  余料{{
                    item.oddments === "0"
                      ? "无"
                      : item.oddments === "1"
                      ? "寄回"
                      : item.oddments === "2"
                      ? "加工"
                      : "无"
                  }}
                </td>
                <td>{{ item.checked ? "已完成" : "未完成" }}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import printJS from "print-js";
import JsBarcode from "jsbarcode";

function unitConversion() {
  /**
   * 获取DPI
   * @returns {Array}
   */
  this.conversion_getDPI = function () {
    var arrDPI = new Array();
    if (window.screen.deviceXDPI) {
      arrDPI[0] = window.screen.deviceXDPI;
      arrDPI[1] = window.screen.deviceYDPI;
    } else {
      var tmpNode = document.createElement("DIV");
      tmpNode.style.cssText =
        "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
      document.body.appendChild(tmpNode);
      arrDPI[0] = parseInt(tmpNode.offsetWidth);
      arrDPI[1] = parseInt(tmpNode.offsetHeight);
      tmpNode.parentNode.removeChild(tmpNode);
    }
    return arrDPI;
  };
  /**
   * px转换为mm
   * @param value
   * @returns {number}
   */
  this.pxConversionMm = function (value) {
    var inch = value / this.conversion_getDPI()[0];
    var c_value = inch * 25.4;
    //      console.log(c_value);
    return c_value;
  };
  /**
   * mm转换为px
   * @param value
   * @returns {number}
   */
  this.mmConversionPx = function (value) {
    var inch = value / 25.4;
    var c_value = inch * this.conversion_getDPI()[0];
    //      console.log(c_value);
    return c_value;
  };
}

export default {
  props: {
    show: Boolean,
    list: {
      type: Array,
      default: () => [],
    },
    types: {
      type: Object,
    },
  },
  data() {
    return {};
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.list.forEach((e, index) => {
        this.getJsBarcode(e.proOrderId, `#barCode${index}`);
      });
      setTimeout(() => {
        this.printHtml();
      }, 100);
    });
  },
  methods: {
    getJsBarcode(code, byId) {
      let barheight = "70";
      JsBarcode(byId, code, {
        format: "CODE128", //条形码的格式
        width: 1, //线宽
        height: barheight, //条码高度
        lineColor: "#000", //线条颜色
        displayValue: true, //是否显示文字
        margin: 2, //设置条形码周围的空白区域
      });
    },
    printHtml() {
      const style =
        "@page { margin: 10px } @media print { .header-view { width: 100%; display: flex; align-items: center; justify-content: space-between; } .header-left {width: 60%;} .img-view { display: flex; align-items: center; }.img-view-img { height: 80px; } .img-view-img img { height: 100%; } .img-view-mods { margin-left: 10px; } .header-right { display: flex; align-items: center;} .header-right-img { width: 80px; height: 80px; margin-left: 10px; } .header-right-img img { width: 100%; height: 100%; } .table-top {margin-top: 10px} table, td, th { text-align: center; border: 1.5px solid #000; border-collapse: collapse;}}";
      printJS({
        printable: "printContent",
        type: "html",
        style: style,
        base64: true,
        scanStyles: false,
        onPrintDialogClose: () => {
          this.shows = false;
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.drawer-view {
  ::v-deep {
    .el-descriptions-row th {
      display: none;
    }
    .el-descriptions-row td {
      border: 1.5px solid #000;
      color: #000;
    }
  }
}

.header-view {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .header-left {
    width: 60%;
  }
  .img-view {
    display: flex;
    align-items: center;
    &-img {
      height: 80px;
      img {
        height: 100%;
      }
    }
    &-mods {
      margin-left: 10px;
    }
  }
  .header-right {
    display: flex;
    align-items: center;
    &-img {
      width: 80px;
      height: 80px;
      margin-left: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
table,
td,
th {
  text-align: center;
  border: 1.5px solid #000;
  border-collapse: collapse;
}
</style>
